<template>
    <div class="page">
        <div class="my">
            <div class="my-head">
                <img  class="my-head-avatar" :src="userInfo.img ? /^(http|https):\/\//.test(userInfo.img) ? userInfo.img : url+userInfo.img : userAvatar"/>
                <div  class="my-head-title">
                    <div class="my-head-username">{{userInfo.member_nickname}}</div>
                    <div class="my-head-id">ID：{{userInfo.member_id+10000}}</div>
                    <button class="my-head-btn" @click="upUserInfo">更新资料</button>
                </div>
            </div>

            <div class="my-list">
                <router-link to="./my-integral" class="my-list-item" >
                    {{userInfo.member_integral}}
                    <div class="my-list-item-title">积分</div>
                </router-link>

                <router-link to="./my-ticket"  class="my-list-item">
                    {{userInfo.member_coupon}}
                    <div  class="my-list-item-title" >旅行红包</div>
                </router-link>
                <router-link  router-link to="./my-income"  class="my-list-item" >
                    ¥ {{userInfo.member_money}}
                    <div  class="my-list-item-title">我的收益</div>
                </router-link>
            </div>
        </div>
        <div class="memberAdd">
            <router-link to="./my-add"  class="memberAdd-btn" :class="userInfo.is_apply>=2 ? 'btn2' : ''">
                <span v-if="userInfo.is_apply==0">普通会员</span>
                <span v-else-if="userInfo.is_apply==1">会员审核中</span>
                <span v-else-if="userInfo.is_apply==2">会员权益</span>
            </router-link>
        </div>
        <div class="h30"></div>
        <div class="list">
            <router-link to="/my-collect" class="list-item" >
                <img class="list-item-icon" src="../assets/my-heart.png"/>
                <div  class="list-item-title">我的收藏</div>
                <img class="list-item-arr" src="../assets/city-list-arr.png"/>
            </router-link>
            <router-link to="/my-program"  class="list-item" >
                <img  class="list-item-icon" src="../assets/my-program.png"/>
                <div  class="list-item-title">我的行程</div>
                <img class="list-item-arr" src="../assets/city-list-arr.png"/>
            </router-link>
            <div @click="goMyOrder" class="list-item" >
                <img  class="list-item-icon" src="../assets/my-order.png"/>
                <div  class="list-item-title">我的订单</div>
                <img class="list-item-arr" src="../assets/city-list-arr.png"/>
            </div>
            <router-link to="/my-ticket-other"  class="list-item" >
                <img  class="list-item-icon" src="../assets/my-ticket-other.png"/>
                <div  class="list-item-title">旅行红包领取</div>
                <img class="list-item-arr" src="../assets/city-list-arr.png"/>
            </router-link>
            <router-link to="/my-add"  class="list-item" >
                <img  class="list-item-icon" src="../assets/my-center.png"/>
                <div  class="list-item-title">会员中心</div>
                <img class="list-item-arr" src="../assets/city-list-arr.png"/>
            </router-link>
            <router-link to="/faq"  class="list-item" >
                <img  class="list-item-icon" src="../assets/my-faq.png"/>
                <div  class="list-item-title">常见问题解答</div>
                <img class="list-item-arr" src="../assets/city-list-arr.png"/>
            </router-link>
            <div @click="showAboutUs"  class="list-item" >
                <img  class="list-item-icon" src="../assets/about_us.png"/>
                <div  class="list-item-title">联系我们</div>
                <img class="list-item-arr" src="../assets/city-list-arr.png"/>
            </div>
            <router-link to="/my-admin" v-if="userInfo.is_admin == 1" class="list-item" >
                <img  class="list-item-icon" src="../assets/my-order.png"/>
                <div  class="list-item-title">查看客户行程</div>
                <img class="list-item-arr" src="../assets/city-list-arr.png"/>
            </router-link>
          <!--  <router-link to="/my-map"  class="list-item" >
                <img  class="list-item-icon" src="../assets/my-faq.png"/>
                <div  class="list-item-title">地圖測試</div>
                <img class="list-item-arr" src="../assets/city-list-arr.png"/>
            </router-link>-->
        </div>

        <div class="my-quit" @click="logout">退出登录</div>
        <div class="h160"></div>
        <TabBar :curr="tabCurr" ></TabBar>
    </div>
</template>

<script>
    import { Toast } from 'mint-ui';
    import TabBar from "../components/TabBar"
    import store from "../store/store"
    import config from "../store/config"
    import storage from "../store/localstorage"
    import * as types from '../store/types'
    import wxShare from "../store/wxShare"
    export default {
        name: "My",
        data(){
            return{
                url:config.url,
                userAvatar:require('../assets/user-avatar.png'),
                tabCurr:4,
                userInfo:[]
            }
        },
        components:{
            TabBar
        },
        methods:{
            goMyOrder(){
                 window.location.href=config.url+'/quick_help_wap1/#/my-order?time='+parseInt(Date.parse(new Date())/1000)
//                this.$router.push({ name: 'my-order', query: { 'time': parseInt(Date.parse(new Date())/1000) }})
            },
            logout(){
                storage.remove('openid')
                storage.remove('unionid')
                storage.remove('thumb')
                storage.remove('member_id')
                storage.remove('userinfo')
                storage.remove('comment_integra')
                storage.remove('product_integra')
                storage.remove('partner_id')
                store.commit(types.LOGOUT, storage.remove('token'))
                this.$router.push({path:"/"})
            },
            upUserInfo(){
                this.axios.post('wap/token/index')
                    .then(res=>{
                        Toast({message: '用户资料更新成功',duration: 1500})
                        this.userInfo=res.data
                        storage.set('userinfo',res.data)
                        store.commit(types.LOGIN, res.data.token)
                        window.localStorage.partner_id=res.data.partner_id
                    })
                    .catch(err=>console.log(err))
            },
            autoUserInfo(){
                this.axios.post('wap/token/index')
                    .then(res=>{
                        this.userInfo=res.data
                        storage.set('userinfo',res.data)
                        window.localStorage.partner_id=res.data.partner_id
                        if (this.$store.state.token) {
                            this.share();//分享
                        }
                    })
                    .catch(err=>console.log(err))
            },
            // 分享
            share() {
                wxShare({
                    title: '快帮行', // 分享标题
                    desc: '我在北美，当地玩乐一网打尽，快帮行带我体验本地化生活。', // 分享描述
                    //link: window.location.href, // 分享链接
                    imgUrl: this.userInfo.img, // 分享图标
                    debug: false
                }, function () {//分享成功后的回调函数
                    //Toast({message: '分享成功！', duration: 1500});
                    console.log('分享成功')
                });
            },
            showAboutUs(){
                document.getElementsByClassName("switchBtn")[0].click();
            }
        },
        mounted(){
            if(storage.get('token')){
                this.userInfo=storage.get('userinfo')
                this.autoUserInfo();
            }else{
                this.$router.push({path:"/my-login"})
            }
            window.scrollTo(0,0);
        }
    }
</script>

<style lang="scss" scoped>
    @import "../assets/base";
    .h30{height: rpx(30);}
    .h160{height: rpx(160);}
    .page{
        background: $bgcolor1;
        min-height: 100%;
    }

    .my{
        padding: rpx(30);
        border-bottom: solid 1px $color2;
        background: $color0;
        &-head{
            display: flex;
            align-items: center;
            padding: rpx(20) 0;
            position: relative;
            &-avatar{
                width:rpx(140);
                height:rpx(140);
                border-radius: 50%;
            }
            &-title{
                padding: rpx(10) rpx(20);
            }
            &-username{
                font-size:rpx(40);
            }
            &-id{
                padding-top: rpx(10);
                font-size:rpx(36);
                color: $color5;
            }
            &-btn{
                position: absolute;
                border: none;
                right: rpx(30);
                top: rpx(70);
                padding: 0;
                width: rpx(120);
                height: rpx(48);
                line-height: rpx(48);
                background: $color4;
                border-radius: $radius6;
                font-size: rpx(24);
                color: $color0;
                text-align: center;

            }
        }

        &-list{
            display:flex;
            align-items: center;
            justify-content: space-between;
            padding-top: rpx(80);
            padding-bottom: rpx(20);
            &-item{
                width: 33.333%;
                text-align: center;
                font-size: rpx(48);
                border-right: solid 1px $color2;
                &-title{
                    padding-top: rpx(10);
                    font-size: rpx(24);
                    color: $color5;
                }
            }
            &-item:last-child{
                border-right: none;
            }
        }

        &-quit{
            margin: rpx(60)  rpx(30) 0;
            padding: rpx(30);
            border-radius: $radius6;
            border: solid 1px $color2;
            background: $color0;
            text-align: center;
            font-size: rpx(34);
        }
    }

    //成为会员

    .memberAdd{
        padding: rpx(30);
        background: $color0;
        &-btn{
            display: block;
            height: rpx(80);
            line-height: rpx(80);
            background: $color3;
            border-radius: $radius6;
            color: $color0;
            font-size: rpx(34);
            text-align: center;
        }
    }


    //项列表
    .list{
        background: $color0;
        &-item{
            display: flex;
            align-items: center;
            padding:rpx(50) rpx(30);
            border-bottom: solid 1px $color2;
            &-icon{
                width: rpx(32);
                height: rpx(32);
                margin-right: rpx(40);
            }
            &-title{
                flex: 1;
                font-size: rpx(34);
            }
            &-arr{
                width: rpx(32);
                height: rpx(32);
            }
        }
    }


</style>